#myCoupon {
  min-height: 100vh;
  width: 100%;
  padding-bottom: 10vh;
  background: #f9f9f9;
}

/*导航nav*/
.content-nav {
  background-color: #fff;
  padding-bottom: 22px;

  .nav-item {
    min-width: 120px;
    text-align: center;
    position: relative;
    top: 22px;
    left: 0;

    ._h2 {
      z-index: 10;
      font-size: 33px;
      font-weight: 500;
      color: rgba(0, 0, 0, 1);
      margin-left: 20rpx;
    }

    ._h4 {
      margin-top: 21px;
      width: 107px;
      height: 7px;
      background: rgba(252, 177, 66, 1);
      border-radius: 3px;
    }
  }
}

/*list-item*/
.list-item-container {
  margin-top: 45px;
}

.list-item {
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  padding: 0 20px;

  .item {
    display: flex;
    background-color: #fff;
    width: 100%;
    border-radius: 15px;

    .left {
      width: 200px;
      height: 200px;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      border-right: 1px dashed #efefef;
      position: relative;

      .value {
        font-size: 46px;
        font-family: Roboto;
        font-weight: 400;
        color: #131313;
        margin-bottom: 15px;
      }

      .text {
        font-size: 24px;
        font-family: PingFang;
        font-weight: 500;
        color: #131313;
      }

      &::after {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        right: -10px;
        top: -10px;
        background-color: #f9f9f9;
      }

      &::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        right: -10px;
        bottom: -10px;
        background-color: #f9f9f9;
      }
    }

    .right {
      padding: 23px 25px 25px 25px;
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .msg {
          .name {
            font-size: 29px;
            font-weight: bold;
            color: #181818;
          }

          .time {
            font-size: 24px;
            font-weight: 500;
            color: #888888;
            margin-top: 15px;
          }
        }

        .btn {
          width: 92px;
          height: 44px;
          background: #FFB72F;
          border-radius: 12px;
          font-size: 22px;
          font-family: PingFang;
          font-weight: 500;
          color: #FFFFFF;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }

      .bottom {
        display: flex;
        justify-content: space-between;
        padding-top: 25px;
        border-top: 1px solid #ececec;
        align-items: center;
        .shop-name {
          font-size: 24px;
          font-family: PingFang;
          font-weight: 500;
          color: #888888;
          flex: 1;
        }
        .show-detail {
          font-size: 26px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #FFB72F;
        }
      }
    }
  }

  /* .item-container {
    width: 693px;
    position: absolute;
    top: 0;
    left: 0;
    .item-lf {
      margin-top: 32px;
      margin-left: 36px;
      ._h2 {
        font-size: 32px;
        font-weight: bold;
        color: rgba(0, 0, 0, 1);
        .sub-lable-style {
          font-size: 24px;
          font-weight: 400;
          color: rgba(230, 67, 64, 1);
        }
      }
      .item-lf-bottom {
        margin-top: 23px;
        ._h3 {
          max-width: 303px;
          font-size: 24px;
          font-weight: 400;
          color: rgba(178, 178, 178, 1);
          line-height: 29px;
        }
      }
    }
    .item-rt {
      width: 126px;
      height: 200px;
      ._h5 {
        width: 29px;
        font-size: 29px;
        color: rgba(255, 255, 255, 1);
        line-height: 36px;
      }
    }
  } */
  .item-container {
    padding: 32rpx 0px 34rpx 44rpx;
    width: 693px;
    position: absolute;
    top: 0;
    left: 0;
    font-family: PingFang SC;

    .brand-msg {
      .brandLogo {
        width: 47px;
        height: 47px;
        border-radius: 50%;
      }

      .brandName {
        font-size: 29px;
        font-weight: 400;
        color: #000000;
        margin-left: 15rpx;
      }

      .line {
        width: 2px;
        height: 35px;
        background: #888888;
        margin: 0px 12px;
      }

      .cpupon-type {
        font-size: 29px;
        font-weight: 400;
        color: #000000;
      }
    }

    .denomination {
      align-items: flex-end;
    }

    .couponName {
      font-size: 32px;
      font-weight: 400;
      color: #000000;
    }

    .denominationDiscount {
      align-items: flex-end;
      margin: 21rpx 0px;
      margin-bottom: 16px;
    }

    .denomination-cash {
      font-size: 67px;
      font-weight: 500;
      color: #fcb142;
    }

    .denomination-text,
    .denomination-text-discount {
      font-size: 40px;
      font-weight: 500;
      margin: 0px 40rpx 6px 14rpx;
    }

    .denomination-text {
      color: #fcb142;
    }

    .denomination-text-discount {
      color: #5888e0;
    }

    .denomination-discount {
      font-size: 67px;
      font-weight: 500;
      color: #5888e0;
    }

    .threshold {
      font-size: 25px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #000000;
      margin-bottom: 8px;
    }

    .general-desc {
      font-size: 40px;
      font-family: PingFang SC;
      font-weight: bold;
      color: #090909;
      margin: 36rpx 0px 20rpx 0px;
      width: 500rpx;
    }

    .past-due {
      font-size: 28px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #e64340;
      margin-left: 3px;
    }

    .dillExpireTime {
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: #b2b2b2;
      margin-left: 5px;
    }
  }

  /*卡券背景图*/
  .coupon-bg {
    /* width: 693px;
    height: 227px; */
  }

  /*金额和折扣的显示浮动*/
  .show-balance-discount {
    width: 200px;
    position: absolute;
    top: 94px;
    right: 130px;
    text-align: center;

    ._h4 {
      display: inline-block;
      text-align: center;
      font-size: 48px;
      font-weight: 500;
      line-height: 36px;
    }

    ._h5 {
      display: inline-block;
      font-size: 32px;
      font-family: Source Han Sans SC;
      line-height: 24px;
    }

    ._h6 {
      display: inline-block;
      margin-bottom: 1px;
      margin-left: 10px;
      font-size: 29px;
      font-family: PingFang SC;
      font-weight: 500;
      line-height: 24px;
    }
  }
}

/*卡片*/
.card-list-item {
  position: relative;

  .top-image-card {
    width: 667px;
    height: 192px;
    background: rgba(0, 0, 0, 0.3);
    border-radius: 20px;
  }

  .item-content {
    z-index: 2;
    top: 0;
    left: 0;
    position: absolute;
    padding-top: 51px;
    padding-left: 47px;

    .logo {
      border-radius: 50%;
    }

    .card-name {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;
      margin-left: 20rpx;
    }

    ._h2 {
      font-size: 28px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    ._h3 {
      margin-top: 30px;
      font-size: 36px;
      font-weight: 500;
      color: rgba(255, 255, 255, 1);
    }

    .desc {
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 600;
      font-style: italic;
      color: #ffffff;
      margin-left: 83rpx;
      margin-top: 10rpx;
    }

    .times {
      font-size: 32px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #ffffff;

      position: absolute;
      bottom: 40rpx;
      right: 50rpx;
    }
  }

  .overdue-prompt {
    width: 170px;
    height: 47px;
    background: #e64340;
    border-radius: 0px 20px 0px 23px;
    position: absolute;
    right: 0;
    top: 0;

    font-size: 27px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #ffffff;
  }

  .item-content-new {
    padding: 27rpx 0px 0px 21rpx;
    width: 100%;
    height: 100%;
  }
}

/*查看已失效的券*/
.look-invalid-coupon {
  padding: 50px 0;

  ._h3 {
    margin-right: 7px;
    font-size: 32px;
    font-family: PingFang SC;
    font-weight: 400;
    color: rgba(87, 107, 149, 1);
  }

  .right-icon {
    width: 32px;
    height: 32px;
  }
}

/* 新卡券 */
.date-type {
  width: 667rpx;
  padding-bottom: 35rpx;

  .card-tab {
    width: 162px;
    height: 60px;
    background: #fcb142;
    border: 1px solid #fcb142;
    border-radius: 29px;

    font-size: 28px;
    font-family: PingFang SC;
    font-weight: 400;
    color: #000000;
  }
}

/* 公共 */
.touMi-modal {
  top: 0;
  left: 0;
  position: absolute;
  z-index: 1;
  width: 667px;
  height: 240rpx;
  background: rgba(0, 0, 0, 0.3);
  border-radius: 20px;
}

.btns-coupon {
  padding: 0px 60rpx 0px 62rpx;
  padding-bottom: constant(safe-area-inset-bottom);
  /* 兼容 iOS < 11.2 */
  padding-bottom: env(safe-area-inset-bottom);
  /* 兼容 iOS >= 11.2 */
  width: 100%;
  padding-top: 11px;
  height: 150px;
  z-index: 999;
}

.bottom-btns {
  width: 300px;
  height: 88px;
  background: #fcb142;
  border-radius: 44px;
}